<template>
  <div>
    <div>
      <el-button type="primary" @click="dialogFormVisible = true">加入团队</el-button>
    </div>
    <div style="margin-top: 10px;">
      <el-table :data="teamViewList" style="width: 100%" border :empty-text="loadingFlag === true ? '正在拼命加载中...':'暂无数据'">
        <el-table-column prop="userView.nickName" label="团队名称"></el-table-column>
        <el-table-column prop="userView.avatarUrl" label="发起人头像">
          <template slot-scope="scope">
            <el-avatar :src="mediaHost + scope.row.userView.avatarUrl"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="teamRole" label="角色">
          <template slot-scope="scope">
            <span v-if="scope.row.teamRole === 1">超级管理员</span>
            <span v-else>管理员</span>
          </template>
        </el-table-column>
        <el-table-column prop="inviteCode" label="团队邀请码">
          <template slot-scope="scope">
            <span v-if="scope.row.inviteCode === '' || scope.row.inviteCode === null">没有权限</span>
            <span v-else>{{scope.row.inviteCode}}</span>
          </template>
        </el-table-column>
        <el-table-column align="right" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              :disabled="scope.row.teamId === teamId"
              @click="exchangeTeam(scope.$index, scope.row)">
              {{scope.row.teamId === teamId ? '正在操作' : '切换团队'}}
            </el-button>
            <el-button
              size="mini"
              :type="scope.row.teamRole === 1 ? 'default': 'danger' "
              :disabled="scope.row.teamRole !== 1 && scope.row.teamId === teamId"
              @click="scope.row.teamRole === 1 ? updateInviteCode() : canQuitTeam(scope.$index, scope.row)">
              {{scope.row.teamRole === 1 ? '新邀请码' : '退出团队'}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--请求标识-->
      <div v-if="loadingFlag=== true" style="text-align: center;font-size: larger;margin-top: 10px;">
        <i  class="el-icon-loading"></i>
      </div>
      <div v-else-if="teamViewList.length > 0" style="text-align: center;font-size: small;color: #99a9bf;margin-top: 10px;">
        <span>--没有更多数据了--</span>
      </div>
    </div>
    <!--加入团队-->
    <el-dialog title="加入团队" :visible.sync="dialogFormVisible" width="20%" :before-close="closeDialog"
               :close-on-click-modal="false" :close-on-press-escape="false">
      <el-input type="text" placeholder="团队邀请码" v-model="inviteCode" autocomplete="off"
                maxlength="25" show-word-limit/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="joinTeam()" :disabled="inviteCode === ''">确 认</el-button>
      </div>
    </el-dialog>
    <!--退出团队提示框-->
    <el-dialog title="提示" :visible.sync="quitDialogVisible" width="20%">
      <span>确认退出此团队吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quitDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="quitTeam()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Team",
  data() {
    return {
      mediaHost: this.$global.mediaHost,
      paramsData: {
        activityId: '',
        page: {}
      },
      loadingFlag:false,
      teamId: this.$global.getTeamId(),
      teamViewList:[],
      quitDialogVisible: false,
      quitTeamId: '',
      dialogFormVisible:false,
      inviteCode:'',
    }
  },
  methods: {
    /**
     *获得推荐课件列表
     *
     */
    getTeamList: function () {
      this.loadingFlag= true
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/team/getTeamList',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.loadingFlag= false
          this.teamViewList = responseData.teamViewList
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
    /**
     *退出团队
     *
     */
    quitTeam: function () {
      this.quitDialogVisible = false
      this.paramsData.quitTeamId = this.quitTeamId
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/team/user/quit',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.$message.success({
            message: "退出团队成功",
            center: true,
            duration: 1000
          });
          this.getTeamList()
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
    canQuitTeam:function (index, row) {
      this.quitDialogVisible = true
      this.quitTeamId = row.teamId
    },
    /**
     *更新团队发起人的邀请码
     *
     */
    updateInviteCode: function () {
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/team/updateInviteCode',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.$message.success({
            message: "邀请码已更新",
            center: true,
            duration: 1000
          });
          this.teamViewList[0].inviteCode = responseData.inviteCode
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
    closeDialog:function () {
      this.dialogFormVisible = false
      this.inviteCode = ''
    },
    cancel:function () {
      this.dialogFormVisible = false
      this.inviteCode = ''
    },
    /**
     *加入团队
     *
     */
    joinTeam: function () {
      if (!this.$global.checkSpecificKey(this.inviteCode)) {
        this.$message.warning({
          message: '不允许输入特殊符号',
          center: true,
          duration: 1000
        });
        return false
      }
      if (this.inviteCode === '') {
        this.$message.warning({
          message: "请填写团队邀请码",
          center: true,
          duration: 1000
        });
        return false
      }
      this.dialogFormVisible = false
      this.paramsData.inviteCode = this.inviteCode
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/team/joinTeam',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.$message.success({
            message: "加入团队成功",
            center: true,
            duration: 1000
          });
          this.getTeamList()
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
    /**
     *切换团队
     *
     */
    exchangeTeam: function (index, row) {
      this.paramsData.currentTeamId = row.teamId
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/team/exchangeTeam',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.$message.success({
            message: "切换团队成功,正在初始化页面",
            center: true,
            duration: 1000
          });
          this.$global.setTabIndex(1)
          this.$global.setTeamId(responseData.teamId)
          this.teamId = this.$global.getTeamId()
          this.getUserBasisInfo()
          this.$router.push({path: "/homePage/activityHouse"})
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
    /**
     * 我的基本信息
     */
    getUserBasisInfo: function () {
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/user/getUserBasisInfo',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.$global.userBasisInfoView = responseData.userBasisInfoView;
          this.$router.go(0)
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
  },
  created() {
    this.getTeamList()
  }
}
</script>

<style scoped>

</style>
